<template>
    <div class="home-navbar">
      <div class="nav-list border" @click="openDialog">
        <div class="list-items border-right">
          <div class="items-icon">
            <!--<span class="iconfont">&#xe605;</span>-->
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shuben"></use>
            </svg>
          </div>
          <div class="items-text">
            <p>二手书籍</p>
          </div>
        </div>
        <div class="list-items">
          <div class="items-icon">
            <!--<span class="iconfont">&#xe8a7;</span>-->
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-kuaidizhishu"></use>
            </svg>
          </div>
          <div class="items-text">
            <p>快递代领</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "home-navbar",
      methods: {
        openDialog () {
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          });
        }
      }
    }
</script>

<style scoped>
  .home-navbar {
    padding: 10px 15px;
  }
  .nav-list {
    display: flex;
    padding: 10px 0;
    box-shadow: 0 0 10px #e5e5e5;
  }
  .list-items {
    flex: 1;
    text-align: center;
  }
  .list-items .items-icon .icon {
    font-size: 25px;
  }
  .list-items .items-icon span {
    font-size: 25px;
    border-radius: 5px;
  }
  .list-items .items-text p {
    margin: 0;
    padding: 5px 0;
    font-size: 12px;
    font-family: Microsoft Yahei;
    font-weight: 500;
    letter-spacing: 1px;
  }
</style>
